<template>
    <transition name="dialog-fade">
      <el-dialog
        v-if="showUserDiag"
        :title="UserDiagTitle"
        class="UserDiag-component"
        :visible.sync="showUserDiag"
        width="700px"
      >
        <el-form
          ref="formInfo"
          :model="formInfo"
          class="demo-form-inline"
          label-width="100px"
        >  
        <el-form-item label="任务名称：" prop="taskName" required>
            <el-input v-model="formInfo.taskName"></el-input>
          </el-form-item>
          <el-form-item label="流程描述：" prop="domainName" required>
            <el-input v-model="formInfo.domainName" placeholder="请输入域名">
          </el-input>
          </el-form-item>
          
  
          <el-form-item label="更新模式：" prop="updateMode" required>
            <el-select v-model="formInfo.updateMode" placeholder="请选择更新模式">
          <el-option label="全量模式" value="option1"></el-option>
          <el-option label="增量模式" value="option2"></el-option>
        </el-select>
          </el-form-item>

          <el-form-item label="手机号：" prop="phone" required>
            <el-input v-model="formInfo.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="mail" required>
            <el-input v-model="formInfo.mail"></el-input>
          </el-form-item>
          
          <el-form-item label="描述：" prop="">
            <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
          </el-form-item>



          <el-form-item style="text-align: right;">
            <el-button type="primary" @click="submitForm('formInfo')"
              >提交</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </transition>
  </template>
   
  <script>
  
  
  export default {
   name: "ComponentsUserDiag",
    props: {
      UserDiagTitle: {
        type: String,
        default: "用户自定义爬取",
      },
      itemInfo: {
        type: Object,
        default: function () {
          return {};
        },
      },
    },
    data() {
      return {
        showUserDiag: false,
        formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
      };
    },
    methods: {
      // 保存操作
      closeDialog(flag) {
      //  this.$refs["formInfo"].resetFields();
        this.showUserDiag = false;
        this.$emit("closeDialog", flag);
      },
      submitForm(formName) {
        const that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {
            // 走保存请求
            that.$message({
              message: "操作成功！",
              type: "success",
            });
            that.closeDialog(1);
          } else {
            return false;
          }
        });
      },
      // 关闭弹框
     
    },
  };
  
  
  </script>
   
  <style scoped lang="scss">
  .demo-form-inline{
    margin-left: 0px;
  }
  .dialog-fade-enter-active {
    -webkit-animation: dialog-fade-in 0.3s;
    animation: dialog-fade-in 0.3s;
  }
  .dialog-fade-leave-active {
    -webkit-animation: dialog-fade-out 0.3s;
    animation: dialog-fade-out 0.3s;
  }
  @-webkit-keyframes dialog-fade-in {
    0% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes dialog-fade-in {
    0% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes dialog-fade-out {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
  }
  @keyframes dialog-fade-out {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
      opacity: 0;
    }
  }
  </style>